<script setup>
import { ref, onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElLoading } from 'element-plus'
import { device4GPage, cameraEnvirPage, lDevice, CameraWorker, recovDevice, layDevice, CardIdAll } from '@/utils/api.js'
import openLayers from '@/components/common/map.vue';
import locationMap from '@/components/common/locationMap.vue';
import wml from '@/components/common/wls-model.vue';
import { Search } from '@element-plus/icons-vue';
import wlsPopup from '@/components/common/wls-popup.vue';
import img4g from '@/assets/images/4G_anchor_center_center.png'
import img4g2 from '@/assets/images/4Goff_anchor_center_center.png'
import moment from 'moment'
const $moment = moment
const route = useRouter();
const ol = ref(null);
const olm = ref(null);
let pageNum = '1';
const keywords = ref('');
const year = ref('');
const totalElements = ref(0);
const status = ref('');
const activeName = ref('first');
const clist = ref([]);
let camera = [], camera2 = [], dayDataNum = [], effectiveRate = [];
const laydev = ref({});
let ccl = ['myrtm01xs', 'myrtm01xs2'];
let svl = 'dayDataNum';
let Worker = [];
let imeiList = [];
const isadd = ref(false);
const isrecycle = ref(false);
const currentPage = ref(1);
const iszqzk = ref(true);
const ruleForm = ref({
    "areaId": "",
    "imei": "",
    "deviceType": 1,
    "layTime": "",
    "planRecovDate": "",
    "lon": "",
    "lat": "",
    "altitude": "",
    "label": "",
    "layUser": "",
    "envirType": "",
    "smallEnvir": "",
    "remark": ""
});
const ruleFormRef = ref(null);

const ruleForms = ref({
    "id": "",
    "deviceType": 1,
    "recoveryDate": "",
    "recovUser": "",
    "damageDegree": "",
    "dumpEnergy": "",
    "freeMemory": "",
    "recycled": false,
    "changeCardId": ""
});
const ruleFormRefs = ref(null);

const fpyear = (data) => {
    if (data != null && data != '') {
        let datetime = new Date(data);
        let year = datetime.getFullYear();
        return year;
    } else {
        return ""
    }
}

const getCardIdAll = async () => {
    let res = await CardIdAll(areaId)
    if (res.code == '200') {
        imeiList = res.data;
    }
}

const getlna = async (item) => {
    ruleForm.value.lon = item[0];
    ruleForm.value.lat = item[1];
}

const validateCoordinates = (lon, lat) => {
    lon = parseFloat(lon);
    lat = parseFloat(lat);

    if (!isNaN(lon) && !isNaN(lat) && lon >= -180 && lon <= 180 && lat >= -90 && lat <= 90 && lon !== 0 && lat !== 0) {
        return true; // 符合要求
    } else {
        return false; // 不符合要求
    }
}

const addcarmelm = () => {

    for (let key in ruleForm.value) {
        ruleForm.value[key] = ''
    }

    isadd.value = true;
    setTimeout(function () {
        olm.value.initmap()
    }, 500)
}

const getCameraWorker = async () => {
    let res = await CameraWorker(areaId)
    if (res.code == '200') {
        Worker = res.data;
    }
};

const ltm = (data) => {
    let type = 1;
    if (activeName.value == 'first') {
        type = 0
    }
    let params = {
        cameraEnvirId: data.id,
        path: '/CameraManagement',
        type: type,
        lon: data.lon,
        lat: data.lat
    }
    ol.value.locationMap(params);
}

const refreshlDevice = async () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    let res = await (areaId)
    loading.close();
    if (res.code == '200') {
        laydev.value = res.data;
        res.data.deviceList.forEach(e => {
            if (e.type == 0) {
                let z = {
                    id: e.id,
                    name: e.label,
                    borderColor: "",
                    fillColor: '',
                    offsetY: 24,
                    iconSrc: e.status == 0 ? img4g : img4g2,
                    data: {
                        type: e.type,
                        lon: e.lon,
                        lat: e.lat,
                        path: "/CameraManagement"
                    },
                    textColor: "#fff",
                    geojson: {
                        'type': 'Point',
                        'coordinates': [e.lon, e.lat]
                    }
                }
                camera.push(z);
            }

            if (e.type == 1) {
                let z = {
                    id: e.id,
                    name: e.label,
                    borderColor: "#1890FF",
                    fillColor: '#FFF',
                    offsetY: 24,
                    radius: 14,
                    iconSrc: "",
                    data: {
                        type: e.type,
                        lon: e.lon,
                        lat: e.lat,
                        path: "/CameraManagement"
                    },
                    textColor: "#fff",
                    geojson: {
                        'type': 'Point',
                        'coordinates': [e.lon, e.lat]
                    }
                }
                camera2.push(z);
            }


            if (e.dayDataNum != null) {
                let z = {
                    id: e.id,
                    cameraEnvirId: e.id,
                    num: e.dayDataNum,
                    path: "/CameraManagement",
                    type: e.type,
                    lon: e.lon,
                    lat: e.lat
                }
                dayDataNum.push(z)
            }

            if (e.effectiveRate != null) {
                let z = {
                    id: e.id,
                    cameraEnvirId: e.id,
                    type: e.type,
                    num: e.effectiveRate + '%',
                    path: "/CameraManagement",
                    lon: e.lon,
                    lat: e.lat
                }
                effectiveRate.push(z)
            }

        })
        ol.value.delOverlay();
        if (dayDataNum.length > 0) {
            ol.value.addMoreOverlay(dayDataNum);
        }

        if (camera.length > 0) {
            setTimeout(function () {
                ol.value.addGeoJson(camera, 'myrtm01xs');
            }, 500)
        }
        if (camera2.length > 0) {
            setTimeout(function () {
                ol.value.addGeoJson(camera2, 'myrtm01xs2');
            }, 500)
        }
    }
}


const getlDevice = async () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    let str = 'areaId=' + areaId + '&year=' + fpyear(year.value);
    let res = await lDevice(str)
    loading.close();
    if (res.code == '200') {
        ol.value.initmap();
        laydev.value = res.data;
        res.data.deviceList.forEach(e => {
            if (e.type == 0) {
                let z = {
                    id: e.id,
                    name: e.label,
                    borderColor: "",
                    fillColor: '',
                    offsetY: 24,
                    iconSrc: e.status == 0 ? img4g : img4g2,
                    data: {
                        type: e.type,
                        lon: e.lon,
                        lat: e.lat,
                        path: "/CameraManagement"
                    },
                    textColor: "#fff",
                    geojson: {
                        'type': 'Point',
                        'coordinates': [e.lon, e.lat]
                    }
                }
                camera.push(z);
            }

            if (e.type == 1) {
                let z = {
                    id: e.id,
                    name: e.label,
                    borderColor: "#1890FF",
                    fillColor: '#FFF',
                    offsetY: 24,
                    radius: 14,
                    iconSrc: "",
                    data: {
                        type: e.type,
                        lon: e.lon,
                        lat: e.lat,
                        path: "/CameraManagement"
                    },
                    textColor: "#fff",
                    geojson: {
                        'type': 'Point',
                        'coordinates': [e.lon, e.lat]
                    }
                }
                camera2.push(z);
            }


            if (e.dayDataNum != null) {
                let z = {
                    id: e.id,
                    num: e.dayDataNum,
                    cameraEnvirId: e.id,
                    path: "/CameraManagement",
                    type: e.type,
                    lon: e.lon,
                    lat: e.lat
                }
                dayDataNum.push(z)
            }

            if (e.effectiveRate != null) {
                let z = {
                    id: e.id,
                    num: e.effectiveRate + '%',
                    path: "/CameraManagement",
                    cameraEnvirId: e.id,
                    type: e.type,
                    lon: e.lon,
                    lat: e.lat
                }
                effectiveRate.push(z)
            }

        })
        if (dayDataNum.length > 0) {
            ol.value.addMoreOverlay(dayDataNum);
        }

        if (camera.length > 0) {
            setTimeout(function () {
                ol.value.addGeoJson(camera, 'myrtm01xs');
            }, 500)
        }
        if (camera2.length > 0) {
            setTimeout(function () {
                ol.value.addGeoJson(camera2, 'myrtm01xs2');
            }, 500)
        }
    }
}


const rcgetlDevice = async () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    camera = [], camera2 = [], dayDataNum = [], effectiveRate = [];
    let str = 'areaId=' + areaId + '&year=' + fpyear(year.value);
    let res = await lDevice(str)
    loading.close();
    if (res.code == '200') {
        laydev.value = res.data;
        res.data.deviceList.forEach(e => {
            if (e.type == 0) {
                let z = {
                    id: e.id,
                    name: e.label,
                    borderColor: "",
                    fillColor: '',
                    offsetY: 24,
                    iconSrc: e.status == 0 ? img4g : img4g2,
                    data: {
                        type: e.type,
                        lon: e.lon,
                        lat: e.lat,
                        path: "/CameraManagement"
                    },
                    textColor: "#fff",
                    geojson: {
                        'type': 'Point',
                        'coordinates': [e.lon, e.lat]
                    }
                }
                camera.push(z);
            }

            if (e.type == 1) {
                let z = {
                    id: e.id,
                    name: e.label,
                    borderColor: "#1890FF",
                    fillColor: '#FFF',
                    offsetY: 24,
                    radius: 14,
                    iconSrc: "",
                    data: {
                        type: e.type,
                        lon: e.lon,
                        lat: e.lat,
                        path: "/CameraManagement"
                    },
                    textColor: "#fff",
                    geojson: {
                        'type': 'Point',
                        'coordinates': [e.lon, e.lat]
                    }
                }
                camera2.push(z);
            }


            if (e.dayDataNum != null) {
                let z = {
                    id: e.id,
                    num: e.dayDataNum,
                    cameraEnvirId: e.id,
                    path: "/CameraManagement",
                    type: e.type,
                    lon: e.lon,
                    lat: e.lat
                }
                dayDataNum.push(z)
            }

            if (e.effectiveRate != null) {
                let z = {
                    id: e.id,
                    num: e.effectiveRate + '%',
                    path: "/CameraManagement",
                    cameraEnvirId: e.id,
                    type: e.type,
                    lon: e.lon,
                    lat: e.lat
                }
                effectiveRate.push(z)
            }

        })
        if (dayDataNum.length > 0 && ccl.indexOf('myrtm01xs') != -1) {
            ol.value.addMoreOverlay(dayDataNum);
        }

        if (camera.length > 0 && ccl.indexOf('myrtm01xs') != -1) {
            setTimeout(function () {
                ol.value.addGeoJson(camera, 'myrtm01xs');
            }, 500)
        }
        if (camera2.length > 0 && ccl.indexOf('myrtm01xs2') != -1) {
            setTimeout(function () {
                ol.value.addGeoJson(camera2, 'myrtm01xs2');
            }, 500)
        }
    }
}

const SwitchOverlay = () => {
    if (svl == 'dayDataNum') {
        if (dayDataNum.length > 0) {
            ol.value.addMoreOverlay(dayDataNum);
        }
    }
    if (svl == 'effectiveRate') {
        if (effectiveRate.length > 0) {
            ol.value.addMoreOverlay(effectiveRate);
        }
    }
}

const SwitchRadio = (data) => {
    svl = data;
    if (ccl.indexOf('myrtm01xs') != -1) {
        ol.value.delOverlay();
        setTimeout(function () {
            SwitchOverlay();
        }, 500)
    }
}

const changeCamera = (data) => {
    if (ccl.indexOf(data) == -1) {
        ccl.push(data);
        if (data == 'myrtm01xs') {
            ol.value.addGeoJson(camera, 'myrtm01xs');
            SwitchOverlay()
        } else {
            ol.value.addGeoJson(camera2, 'myrtm01xs2');
        }
    } else {
        ccl.splice(ccl.indexOf(data), 1);
        ol.value.delLayers(data);
        if (data == 'myrtm01xs') {
            ol.value.delOverlay()
        }
    }
}

const getdevice4GPage = async () => {
    let str = '?areaId=' + areaId + '&pageNum=' + pageNum + '&pageSize=10&keywords=' + keywords.value + '&status=' + status.value + '&year=' + fpyear(year.value)
    let res = await device4GPage(str)
    if (res.code == '200') {
        clist.value = res.data.content;
        totalElements.value = res.data.totalElements;
    }
}

const getcameraEnvirPage = async () => {
    let str = '?areaId=' + areaId + '&pageNum=' + pageNum + '&pageSize=10&keywords=' + keywords.value + '&status=' + status.value + '&year=' + fpyear(year.value)
    let res = await cameraEnvirPage(str)
    if (res.code == '200') {
        clist.value = res.data.content;
        totalElements.value = res.data.totalElements;
    }
}

const rccdwy = () => {
    scl();
    ol.value.delOverlay();
    ol.value.delLayers('myrtm01xs');
    ol.value.delLayers('myrtm01xs2');
    rcgetlDevice();
}

const scl = () => {
    pageNum = 1;
    currentPage.value = 1;
    if (activeName.value == 'first') {
        getdevice4GPage();
    } else {
        getcameraEnvirPage();
    }

}

const formatProcessingTime = (data) => {
    if (data != null && data != '') {
        let datetime = new Date(data);
        let year = datetime.getFullYear();
        let month = datetime.getMonth() + 1;
        let date = datetime.getDate();
        let Hours = datetime.getHours();
        let Minutes = datetime.getMinutes();
        let Seconds = datetime.getSeconds();

        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (date >= 0 && date <= 9) {
            date = "0" + date;
        }
        if (Hours >= 1 && Hours <= 9) {
            Hours = "0" + Hours;
        }
        if (Minutes >= 0 && Minutes <= 9) {
            Minutes = "0" + Minutes;
        }
        if (Seconds >= 1 && Seconds <= 9) {
            Seconds = "0" + Seconds;
        }
        return year + "-" + month + "-" + date + " " + Hours + ":" + Minutes + ":" + Seconds;
    } else {
        return ""
    }
}

const submitForms = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (ruleForms.value.recoveryDate == null || ruleForms.value.recoveryDate == '') {
                ElMessage({
                    message: '请选择回收时间',
                    type: 'warning'
                })
                return false
            }
            if (ruleForms.value.recovUser == null || ruleForms.value.recovUser == '') {
                ElMessage({
                    message: '请选择回收人员',
                    type: 'warning'
                })
                return false
            }

            if (activeName.value == 'second' && !ruleForms.value.recycled && ruleForms.value.changeCardId == '') {
                ElMessage({
                    message: '请选择卡编号',
                    type: 'warning'
                })
                return false
            }


            let params = JSON.parse(JSON.stringify(ruleForms.value));
            params.deviceType = 1;
            if (activeName.value == 'first') {
                params.deviceType = 0;
            }
            params.recoveryDate = formatProcessingTime(params.recoveryDate);
            recovDevice(params).then(res => {
                if (res.code == '200') {
                    if (activeName.value == 'first') {
                        getdevice4GPage();
                    } else {
                        getcameraEnvirPage();
                    }
                    // refreshlDevice();
                    resetForms(ruleFormRefs.value);
                    ElMessage({
                        message: '回收完成',
                        type: 'success'
                    })
                }
            })


        } else {
            console.log('error submit!', fields)
        }
    })
};
const resetForms = (formEl) => {
    if (!formEl) return
    isrecycle.value = false;
    formEl.resetFields()
};
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (ruleForm.value.imei == null || ruleForm.value.imei == '') {
                ElMessage({
                    message: '请填写相机编号',
                    type: 'warning'
                })
                return false
            }
            if (!validateCoordinates(ruleForm.value.lon, ruleForm.value.lat)) {
                ElMessage({
                    message: '经纬度是必填项，请输入正确的经纬度',
                    type: 'warning',
                })
                return false
            }

            let params = JSON.parse(JSON.stringify(ruleForm.value));
            params.areaId = areaId;
            params.deviceType = 1;
            if (activeName.value == 'first') {
                params.deviceType = 0;
            }

            params.layTime = formatProcessingTime(params.layTime);
            params.planRecovDate = formatProcessingTime(params.planRecovDate);

            layDevice(params).then(res => {
                if (res.code == '200') {
                    scl();
                    refreshlDevice();
                    resetForm(ruleFormRef.value);
                    ElMessage({
                        message: '布设完成',
                        type: 'success'
                    })
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
};
const resetForm = (formEl) => {
    if (!formEl) return
    isadd.value = false;
    formEl.resetFields()
};
const handleClick = () => {

};
const handleSizeChange = (val) => {
    pageNum = val;
    if (activeName.value == 'first') {
        getdevice4GPage();
    } else {
        getcameraEnvirPage();
    }
};

const rtmd = (id) => {
    let name = '红外相机';
    if (activeName.value == 'first') {
        name = '实时相机'
    }
    let Cache = {
        pageNum: pageNum,
        currentPage: currentPage.value,
        keywords: keywords.value,
        activeName: activeName.value,
        year: fpyear(year.value)
    }
    window.sessionStorage.setItem('Cache', JSON.stringify(Cache));
    route.push({ path: '/CameraManagement/wlsDetails', query: { name: name, id: id } });
}

const getCache = () => {
    let data = JSON.parse(window.sessionStorage.getItem('Cache'));
    pageNum = data.pageNum;
    currentPage.value = data.currentPage;
    keywords.value = data.keywords;
    activeName.value = data.activeName;
    year.value = new Date(data.year);
    if (activeName.value == 'first') {
        getdevice4GPage();
    } else {
        getcameraEnvirPage();
    }
    window.sessionStorage.removeItem('Cache')
}

let areaId = ''
onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    setTimeout(function () {
        if (window.sessionStorage.getItem('Cache') != null) {
            getCache()
        } else {
            getdevice4GPage();
        }
    }, 500)
    getlDevice();
    getCameraWorker();
    getCardIdAll();
});
defineExpose({
    $moment
})
</script>
<template>
    <open-layers ref="ol" />
    <wml :class="iszqzk ? 'tzph' : 'tzph2'">
        <el-row justify="space-between">
            <el-col :span="13">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-change="scl()">
                    <el-tab-pane label="实时相机" name="first">实时相机</el-tab-pane>
                    <el-tab-pane label="红外相机" name="second">红外相机</el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span="11" style="display: flex;justify-content: flex-end;">

                <div style="height: 40px;display: flex; align-items: center;cursor: pointer;">
                    <!-- <svg class="wls-icon" aria-hidden="true">
                        <use xlink:href="#icon-fangzhixiangji"></use>
                    </svg> -->
                    <i style="color: var(--wls-color);" class="icon iconfont icon-fangzhixiangji"></i>
                    <span class="wlsc" @click.stop="addcarmelm()" style="margin-left: 0.08rem;">放置相机</span>
                </div>

                <div class="sqzk">
                    <span v-if="iszqzk" @click.stop="iszqzk = false">
                        收起
                        <el-icon>
                            <ArrowUp />
                        </el-icon>

                    </span>
                    <span v-else @click.stop="iszqzk = true">
                        展开
                        <el-icon>
                            <ArrowDown />
                        </el-icon>

                    </span>
                </div>

            </el-col>
        </el-row>

        <el-row :gutter="10" style="margin-bottom: .16rem;" justify="space-between">
            <el-col :span="8">
                <el-date-picker style="width: 100%;" size="large" @change="rccdwy" v-model="year" type="year"
                    placeholder="选择年" />
            </el-col>
            <el-col :span="8">
                <el-select v-model="status" class="m-2" @change="scl()" clearable placeholder="布设计划" size="large">
                    <el-option label="已布设" value="已布设" />
                    <el-option label="已回收" value="已回收" />
                </el-select>
            </el-col>
            <el-col :span="8">
                <el-input v-model="keywords" style="width: 100%;" size="large" placeholder="搜索相机编号"
                    class="input-with-select">
                    <template #append>
                        <el-button @click.stop="scl()" :icon="Search" />
                    </template>
                </el-input>
            </el-col>

        </el-row>

        <div v-if="iszqzk" style="width: 100%;height: calc(100% - 2rem);" class="scol">

            <div class="wls-list" v-for="(i, index) in clist" :key="i.id">
                <div class="wls-status wls-off" v-if="i.status == 0">
                    <!-- 3 回收   0 布设 -->
                    <span>布设在外</span>
                </div>
                <div class="wls-list-title">
                    <span v-if="activeName == 'first'">相机编号:{{ i.imei }}</span>
                    <span v-else>相机编号:{{ i.cameraCardId }}</span>
                </div>
                <div class="wls-list-img-r">
                    <div class="wls-list-img-r-t">
                        <div><span>放置时间</span></div>
                        <div v-if="activeName == 'first'">
                            <span>{{ $moment(i.layTime).format('YYYY-MM-DD') }}~{{ i.recovDateLong == null ? '--' :
                                $moment(i.recovDateLong).format('YYYY-MM-DD') }}</span>
                        </div>
                        <div v-else>
                            <span>{{ i.layTime }}~{{ i.planRecovDate }}</span>
                        </div>
                    </div>
                    <div class="wls-list-img-r-t">
                        <div><span>放置位置</span></div>
                        <div style="display: flex;align-items: center;">
                            <span>{{ i.lon }}，{{ i.lat }}，{{ i.altitude }}m</span>
                            <div class="wls-list-s"></div>
                            <span>{{ i.oneKmGridNum }}</span>
                        </div>
                    </div>
                    <div class="wls-list-img-r-t" v-if="activeName == 'first'">
                        <div><span>拍摄情况</span></div>
                        <div><span>{{ i.todayMediaNum }}张</span></div>
                    </div>
                    <div class="wls-list-img-r-c">
                        <div>
                            <!-- <svg class="wls-icon" v-if="i.status == 0" aria-hidden="true">
                            <use xlink:href="#icon-huishouxiangji"></use>
                        </svg> -->
                            <i v-if="i.status == 0" style="color: var(--wls-color);"
                                class="icon iconfont icon-huishouxiangji"></i>
                            <span v-if="i.status == 0" class="wls-list-span wlsc"
                                @click.stop="isrecycle = true, ruleForms.id = i.id"
                                style="margin-right: 0.24rem;">回收相机</span>
                        </div>

                        <div>
                            <!-- <svg class="wls-icon" aria-hidden="true">
                            <use xlink:href="#icon-dingwei"></use>
                        </svg> -->
                            <i style="color: var(--wls-color);" class="icon iconfont icon-dingwei"></i>
                            <span class="wls-list-span wlsc" @click.stop="ltm(i)"
                                style="margin-right: 0.24rem;">定位</span>
                            <!-- <svg class="wls-icon" aria-hidden="true">
                            <use xlink:href="#icon-chakanxiangqing"></use>
                        </svg> -->
                            <i style="color: var(--wls-color);" class="icon iconfont icon-chakanxiangqing"></i>
                            <span class="wls-list-span wlsc" @click.stop="rtmd(i.id)">查看详情</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-pagination v-if="iszqzk" v-model:current-page="currentPage" :page-size="10" :pager-count="5" :small="true"
            :disabled="false" background layout="total, prev, pager, next, jumper" :total="totalElements"
            @current-change="handleSizeChange" />
    </wml>
    <!-- 编辑弹窗 B-->
    <wls-popup v-if="isadd">
        <div class="wls-info" style="width: 14rem;">
            <div class="d-lkb-c">
                <!-- <svg class="wls-icon" aria-hidden="true" @click="resetForm(ruleFormRef)"
                    style="width: .4rem;height: 0.4rem;">
                    <use xlink:href="#icon-guanbi"></use>
                </svg> -->
                <i class="icon iconfont icon-guanbi" style="font-size: .2rem;" @click="resetForm(ruleFormRef)"></i>
            </div>
            <div class="wls-info-title">
                <div></div>
                <div><span>放置相机</span></div>
            </div>
            <div style="height: 0.16rem;"></div>
            <div style="display: flex;overflow: hidden;">
                <div style="width: 8rem;padding-right: 0.24rem;">
                    <location-map ref="olm" @sendlna="getlna" />
                </div>
                <el-form ref="ruleFormRef" :model="ruleForm" label-position="top" class="demo-ruleForm" size="large"
                    status-icon>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="相机编号">
                                <el-input v-model="ruleForm.imei" placeholder="请输入相机编号" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="标签">
                                <el-input v-model="ruleForm.label" maxlength="6" placeholder="不能超过六个字符" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="布设人">
                                <el-select v-model="ruleForm.layUser" style="width: 100%;" class="m-2"
                                    placeholder="请选择布设人" size="large">
                                    <el-option v-for="w in Worker" :key="w[0]" :label="w[1]" :value="w[0]" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="海拔(m)">
                                <el-input style="width: 100%;" type="number" v-model="ruleForm.altitude" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="布设时间">
                                <el-date-picker style="width: 100%;" v-model="ruleForm.layTime" type="datetime"
                                    placeholder="请选择布设时间" format="YYYY/MM/DD HH:mm:ss" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="回收时间">
                                <el-date-picker style="width: 100%;" v-model="ruleForm.planRecovDate" type="datetime"
                                    placeholder="请选择回收时间" format="YYYY/MM/DD HH:mm:ss" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="经度">
                                <el-input style="width: 100%;" v-model="ruleForm.lon" placeholder="建议点击地图选点" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="纬度">
                                <el-input style="width: 100%;" v-model="ruleForm.lat" placeholder="建议点击地图选点" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="生境类型">
                                <el-select v-model="ruleForm.envirType" style="width: 100%;" class="m-2"
                                    placeholder="请选择生境类型" size="large">
                                    <el-option label="常阔" value="常阔" />
                                    <el-option label="常阔混交" value="常阔混交" />
                                    <el-option label="落阔" value="落阔" />
                                    <el-option label="针阔混交" value="针阔混交" />
                                    <el-option label="针叶林" value="针叶林" />
                                    <el-option label="灌丛" value="灌丛" />
                                    <el-option label="草坡" value="草坡" />
                                    <el-option label="流石滩" value="流石滩" />
                                    <el-option label="滩涂" value="滩涂" />
                                    <el-option label="苇塘" value="苇塘" />
                                    <el-option label="水面" value="水面" />
                                    <el-option label="草甸" value="草甸" />
                                    <el-option label="沼泽" value="沼泽" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="小生境">
                                <el-select v-model="ruleForm.smallEnvir" style="width: 100%;" class="m-2"
                                    placeholder="请选择小生境" size="large">
                                    <el-option label="河边" value="河边" />
                                    <el-option label="林下" value="林下" />
                                    <el-option label="竹林中" value="竹林中" />
                                    <el-option label="草丛" value="草丛" />
                                    <el-option label="树洞" value="树洞" />
                                    <el-option label="岩下" value="岩下" />
                                    <el-option label="公路上" value="公路上" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">
                            保存
                        </el-button>
                        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </div>
    </wls-popup>
    <!-- 编辑弹窗 E-->

    <!-- 回收相机 B-->
    <wls-popup v-if="isrecycle">
        <div class="wls-info">
            <div class="d-lkb-c">
                <!-- <svg class="wls-icon" aria-hidden="true" @click="resetForms(ruleFormRefs)"
                    style="width: .4rem;height: 0.4rem;">
                    <use xlink:href="#icon-guanbi"></use>
                </svg> -->
                <i class="icon iconfont icon-guanbi" style="font-size: .2rem;" @click="resetForms(ruleFormRefs)"></i>
            </div>
            <div class="wls-info-title">
                <div></div>
                <div><span>回收相机</span></div>
            </div>
            <div style="height: 0.16rem;"></div>
            <el-form ref="ruleFormRefs" :model="ruleForms" label-position="top" class="demo-ruleForm" size="large"
                status-icon>
                <el-form-item label="回收时间">
                    <el-date-picker style="width: 100%;" v-model="ruleForms.recoveryDate" type="datetime"
                        placeholder="请选择回收时间" format="YYYY/MM/DD HH:mm:ss" />
                </el-form-item>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="回收人员">
                            <el-select v-model="ruleForms.recovUser" style="width: 100%;" class="m-2"
                                placeholder="请选择回收人员" size="large">
                                <el-option v-for="w in Worker" :key="w[0]" :label="w[1]" :value="w[1]" />
                            </el-select>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="相机剩余电量">
                            <el-select v-model="ruleForms.dumpEnergy" style="width: 100%;" class="m-2"
                                placeholder="请选择相机剩余电量" size="large">
                                <el-option label="较多剩余" value="完好" />
                                <el-option label="部分剩余" value="轻损" />
                                <el-option label="无剩余" value="无剩余" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="相机剩余内存">
                            <el-select v-model="ruleForms.freeMemory" style="width: 100%;" class="m-2"
                                placeholder="请选择相机剩余内存" size="large">
                                <el-option label="较多剩余" value="完好" />
                                <el-option label="部分剩余" value="轻损" />
                                <el-option label="无剩余" value="无剩余" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="相机损坏程度">
                            <el-select v-model="ruleForms.damageDegree" style="width: 100%;" class="m-2"
                                placeholder="请选择相机损坏程度" size="large">
                                <el-option label="完好" value="完好" />
                                <el-option label="轻损" value="轻损" />
                                <el-option label="损坏" value="损坏" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!--  -->
                <el-row :gutter="20" v-if="activeName == 'second'">
                    <el-col :span="12">
                        <el-form-item label="回收相机" class="smt-hjshh" style="text-align: left;">
                            是否回收相机 <el-switch v-model="ruleForms.recycled" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="卡编号" v-if="!ruleForms.recycled">
                            <el-select style="width: 100%;" v-model="ruleForms.changeCardId" filterable clearable
                                class="m-2" placeholder="填选相机编号" size="large">
                                <el-option v-for="(i, index) in imeiList" :key="i.id" :label="i.imei" :value="i.imei" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submitForms(ruleFormRefs)">
                        保存
                    </el-button>
                    <el-button @click="resetForms(ruleFormRefs)">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </wls-popup>
    <!-- 回收相机 E-->


    <div class="camera-wls">
        <div class="camera-wls-o">
            <div>
                <img style="width: 0.2rem;height: 0.2rem;" :src="img4g" alt="">
                <span style="margin-left: 0.08rem;">实时相机</span>
            </div>
            <div>
                <span style="margin-right: 0.04rem;">{{ laydev.realTimeDeviceSum }}次</span>
                <input type="checkbox" @change="changeCamera('myrtm01xs')" :checked="true">
            </div>
        </div>

        <div class="camera-wls-o">
            <div style="flex: 1;" class="cwobf">
                <span>在线(台)</span><span style="margin-left: 0.08rem;">{{ laydev.onLineSum }}</span>
            </div>
            <div style="flex: 1;" class="cwof">
                <span>离线(台)</span><span style="margin-left: 0.08rem;">{{ laydev.offLineSum }}</span>
            </div>
        </div>

        <div class="camera-wls-o">
            <div>
                <img style="width: 0.2rem;height: 0.2rem;" src="/src/assets/images/infraredcamera.png" alt="">
                <span style="margin-left: 0.08rem;">红外相机</span>
            </div>
            <div>
                <span style="margin-right: 0.04rem;">{{ laydev.cameraSum }}次</span>
                <input type="checkbox" @change="changeCamera('myrtm01xs2')" :checked="true">
            </div>
        </div>

        <div class="camera-wls-o">

            <div class="cwosp">
                <div>
                    <span>显示</span>
                </div>

                <div>
                    <label>
                        <input type="radio" name="option" checked @change="SwitchRadio('dayDataNum')" value="option1">
                        &nbsp;
                        全部照片数量
                    </label>
                </div>
                <div>
                    <label>
                        <input type="radio" name="option" @change="SwitchRadio('effectiveRate')" value="option1">
                        &nbsp;
                        有效率
                    </label>
                </div>
            </div>

        </div>
    </div>
</template>
<style scoped>
.wls-list {
    width: 100%;
    padding: .16rem;
    position: relative;
    margin-bottom: 0.24rem;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0px 0px 8px 0px rgba(220, 223, 230, 0.80);
    cursor: pointer;
}

.wls-status {
    width: 0.88rem;
    height: .26rem;
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px 4px;
}

.wls-off {
    background: var(--wls-color);
}

.wls-online {
    background-color: #0AD0A1;
}

.wls-list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 0.16rem;
}

.wls-list-item {
    width: 100%;
    display: flex;
    align-items: center;
    color: #606266;
    margin-bottom: 0.08rem;
    overflow: hidden;
}

.wls-list-span {
    display: inline-block;
    margin-left: 0.08rem;
    line-height: 2;
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
}

.wls-list-s {
    width: 1px;
    height: 0.18rem;
    margin: 0 .16rem;
    background-color: #DCDFE6;
}

.wlsli {
    justify-content: space-between;
}


.wls-list-item-l {
    flex: 8;
    line-height: 2;
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
}

.wlsli span {
    display: inline-block;
    padding: 0.04rem 0.08rem;
    border-radius: 4px;
    background: rgba(220, 223, 230, 0.50);
    margin-right: .08rem;
    color: #606266;
}

.wls-list-item-r {
    flex: 2;
    text-align: right;
}

.wlsc {
    color: var(--wls-color);
    text-decoration: underline;
}

.wls-list-img {
    width: 100%;
    height: 1.5rem;
    display: flex;
}

.wls-list-img-l {
    width: 2rem;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right-color: #000;
}

.wls-list-img-l img {
    width: 100%;
    height: 100%;
}

.wls-list-img-l video {
    max-width: 100%;
    max-height: 100%;
}

.wls-list-img-r {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wls-list-img-r-t {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 0.08rem;
}

.wls-list-img-r-t>div:nth-child(1) {
    width: 1.12rem;
    height: 0.3rem;
    border-radius: 4px;
    color: #606266;
    margin-right: 0.08rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F7FA;
}

.wls-list-img-r-t>div:nth-child(2) {
    width: calc(100% - 1rem);
    line-height: 2;
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
}

.wls-list-img-r-c {
    width: 100%;
    margin-top: 0.08rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wls-list-img-r-c>div {
    display: flex;
    align-items: center;
}


.wls-info {
    width: 6rem;
    padding: .24rem;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.camera-wls {
    width: 3rem;
    padding: 0.16rem;
    position: absolute;
    left: .16rem;
    bottom: 0.64rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.50);
    cursor: pointer;
    overflow: hidden;
}

.camera-wls-o {
    height: .4rem;
    margin-bottom: 0.05rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.camera-wls-o>div {
    color: #fff;
    display: flex;
    align-items: center;

}

.cwobf {
    height: 100%;
    padding-left: 0.1rem;
    margin-right: 0.16rem;
    border-radius: 4px;
    border: 1px solid #387BFF;
    background: rgba(56, 123, 255, 0.30);
}

.cwof {
    height: 100%;
    padding-left: 0.1rem;
    border-radius: 4px;
    border: 1px solid #F84848;
    background: rgba(248, 72, 72, 0.30);
}

.cwosp {
    width: 100%;
    justify-content: space-between;
}

.cwosp input {
    margin: 0;
    padding: 0;
}

.cwosp label {
    height: 0.3rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}


.sqzk {
    height: 40px;
    margin-left: 0.24rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #387BFF;
}

.tzph {
    height: calc(100% - .32rem);
}

.tzph2 {
    height: .8rem;
}
</style>

<style>
.smt-hjshh .el-form-item__content {
    justify-content: space-between;
}
</style>